<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>iscroll</title>
    <link rel="stylesheet" href="/res/css/module.css"/>
</head>
<body ng-app="mobileApp" ng-controller="iscrollCtl">
<style>
    /*弹出层*/
    .m-layer{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:rgba(0,0,0,0.6);}
    .m-layer > table{table-layout:fixed;width:100%;height:100%;}
    .m-layer > table > tbody > tr > td{vertical-align:middle;}
    .m-layer .lywrap{position:relative;width:280px;margin:0 auto;border:5px solid rgba(0,0,0,0.3);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.2);}
    .m-layer .lytt{position:relative;padding:10px;height:20px;margin:0 0 -1px;line-height:20px;border-bottom:1px solid #ddd;border-radius:5px 5px 0 0;background:#fafafa;}
    .m-layer .lytt h2{float:left;font-size:14px;font-weight: normal;}
    .m-layer .lyclose{float:right;font-weight:bold;font-family:arial;font-size:24px;color:#ccc;text-shadow:0 1px #fff;cursor:pointer;}
    .m-layer .lyclose:hover{color:#aaa;}
    .m-layer .lyct:last-child,.m-layer .lybt{border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
    .m-layer .lyct:first-child{border-top-left-radius:5px;border-top-right-radius:5px;}
    .m-layer .lyct{padding:20px;background:#fff;}
    .m-layer .lybt{height:30px;line-height:30px;padding:10px;margin:-1px 0 0;border-top:1px solid #ddd;background:#f7f7f7;}
    .m-layer .lyother{float:left;color:#999;}
    .m-layer .lybtns{float:right;}
    .m-layer .lybtns button{float:left;margin-left:10px;}
    /* 显示 */
    .m-layer.z-show{display:block;}
</style>
<div data-helloworld></div>
<div class="m-scroll" id="js_scroll" ng-init="scroll()">
    <div id="scroller">
        <ul>
            <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
            <li>Pretty row 17</li>
            <li>Pretty row 18</li>
            <li>Pretty row 19</li>
            <li>Pretty row 20</li>
            <li>Pretty row 21</li>
            <li>Pretty row 22</li>
            <li>Pretty row 23</li>
            <li>Pretty row 24</li>
            <li>Pretty row 25</li>
            <li>Pretty row 26</li>
            <li>Pretty row 27</li>
            <li>Pretty row 28</li>
            <li>Pretty row 29</li>
            <li>Pretty row 30</li>
            <li>Pretty row 31</li>
            <li>Pretty row 32</li>
            <li>Pretty row 33</li>
            <li>Pretty row 34</li>
            <li>Pretty row 35</li>
            <li>Pretty row 36</li>
            <li>Pretty row 37</li>
            <li>Pretty row 38</li>
            <li>Pretty row 39</li>
            <li>Pretty row 40</li>
            <li>Pretty row 41</li>
            <li>Pretty row 42</li>
            <li>Pretty row 43</li>
            <li>Pretty row 44</li>
            <li>Pretty row 45</li>
            <li>Pretty row 46</li>
            <li>Pretty row 47</li>
            <li>Pretty row 48</li>
            <li>Pretty row 49</li>
            <li>Pretty row 50</li>
            <li ng-repeat="dataItem in dataList">Row {{$index+1}}</li>
        </ul>
    </div>
</div>
</body>
<script src="/res/js/open/angular.min.js"></script>
<script src="/res/js/open/json2.js"></script>
<script src="/res/js/open/iscroll.js"></script>
<script>
    //'use strict';
    angular.module('mobileApp', [])
            .controller("iscrollCtl",function($scope,$http){
                $scope.dataList =[];

                //iscroll
                var myScroll;
                $scope.scroll = function(){
                    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
                    myScroll = new IScroll('.m-scroll', {
                        mouseWheel: true,
                        scrollbars: true,
                        interactiveScrollbars: true,
                        shrinkScrollbars: 'scale',
                        fadeScrollbars: true
                    })
                    myScroll.on("scrollEnd",function(){
                        if(myScroll.getScrollY()<=myScroll.maxScrollY){
//                            console.log("myScroll.getScrollY()::"+myScroll.getScrollY());
//                            console.log("myScroll.maxScrollY::"+myScroll.maxScrollY);
                            $http.get("/shop/dish-list.jhtm")
                                    .success(function(ret){
                                        for(var i=0 in ret.data.dataList){
                                            $scope.dataList.push(ret.data.dataList[i]);
                                        }
                                        myScroll.refresh();
                                    });
                        }
                    });
                }

                //test
                $scope.test = function(){
                    $scope.show = false;
                }
            })

        .directive('helloworld', function() {
                return {
                    restrict: 'A',
                    replace: 'true',
                    templateUrl:"../include/mask.html",
                    link: function(scope, elem, attrs){
                        scope.show= true;
                        console.log(elem.html());
                        elem.find(".lyclose").on("click",function(){
                             console.log("xx");
                        });
                    }
                };
        });
</script>
</html>